﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"/>	<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/demos.css" />
		<style type="text/css">
			.weui-tab,
			.weui-tabbar {
				min-width: 320px;
			}
			
			.top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 18px;
				color: #9A9A9A;
				font-family: "微软雅黑";
				border-bottom: 5px solid #C9C9C9;
			}
			
			.topa {
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: red;
				border-bottom: 5px solid #C9C9C9;
			}
			
			.topa img {
				margin-left: 20px;
				margin-right: 5px;
				width: 20px;
				vertical-align: middle;
			}
			
			.topb {
				padding-left: 14px;
				font-size: 14px;
				height: 50px;
				line-height: 50px;
				border-bottom: 5px solid #C9C9C9;
			}
			
			.topb img {
				margin-left: 3px;
				margin-right: 5px;
				height: 30px;
				vertical-align: middle;
			}
			
			.topb img:last-of-type {
				float: right;
				margin-top: 10px;
				cursor: pointer;
			}
			
			.main div {
				border-bottom: 1px dashed #9C9C9C;
				position: relative;
				padding: 5px 0px;
			}
			
			.main img {
				max-width: 100px;
				vertical-align: middle;
				border: 1px solid #9C9C9C;
				margin-right: 5px;
			}
			
			.main div span:first-of-type {
				position: absolute;
				display: inline-block;
				line-height: 60px;
				font-size: 16px;
			}
			
			.main div span:last-of-type {
				position: absolute;
				top: 50%;
				font-size: 18px;
				color: red;
				display: inline-block;
				line-height: 60px;
			}
			
			.main div p {
				position: absolute;
				right: 0px;
				bottom: 0px;
				height: 40px;
				line-height: 40px;
			}
			
			.main input[type=button] {
				width: 30px;
				height: 30px;
			}
			
			.main input[type=text] {
				width: 30px;
				height: 30px;
				margin: 0px 5px;
				text-align: center;
				outline: none;
			}
			.last{
				position: relative;
				height: 60px;
				line-height: 60px;
				margin-bottom: 60px;
			}
			.last :nth-child(3){
				position: absolute;
				right: 110px;
				top:-10px;
				font-size: 14px;
			}
			.last :nth-child(4){
				position: absolute;
				right: 110px;
				top:10px;
				font-size: 14px;
			}
			.last span:last-of-type{
				border-radius:5px ;
				display: inline-block;
				float: right;
				margin-top: 10px;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: white;
				font-size: 14px;
				background-color:#CE3C39 ;
				cursor: pointer;
			}
			.last label{
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div id="tab3" class="weui-tab__bd-item weui-tab__bd-item--active">
					<div class="top">
						<span>购物车</span>
					</div>
					<div class="topa">
						<img src="img/img/icon_concern.png" /><span>单笔订单满68元包邮</span>
					</div>
					<div class="topb">
						<i class="weui-icon-success"></i><img src="img/img/liang.png" /><span>良品快运</span><img src="img/img/youhuijuan.png" />
					</div>
					<div class="main">
						<div>
							<i class="weui-icon-success"></i>
							<img src="img/img/CghmQldCx_iAF1cTAABd88jRcF8324.jpg" />
							<span>绝味鸭脖</span>
							<span>￥ 9.9</span>
							<p><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></p>
						</div>
						<div>
							<i class="weui-icon-success"></i>
							<img src="img/img/CghmQ1dCxQ-AYhv7AABSZiFQRP0605.jpg" />
							<span>新疆蜜枣</span>
							<span>￥4.5</span>
							<p><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></p>
						</div>
						<div>
							<i class="weui-icon-success"></i>
							<img src="img/img/CghmQ1dCx2iAEhNEAABMAErBcNA700.jpg" />
							<span>大紫葡萄</span>
							<span>￥ 7.0</span>
							<p><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></p>
							
						</div>
						<div>
							<i class="weui-icon-success"></i>
							<img src="img/img/CghmQ1dCx5OAFhgJAAB3TO0ffJo992.jpg" />
							<span>辣鱿鱼丝</span>
							<span>￥ 3.2</span>
							<p><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></p>
							
						</div>
						<div>
							<i class="weui-icon-success"></i>
							<img src="img/img/CghmQ1cHDAuABvDkAABGCKkHSf8396.jpg" />
							<span>极品豆干</span>
							<span>￥ 9.9</span>
							<p><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></p>
						</div>
					</div>
					<div class="last">
						<i class="weui-icon-success"></i>
						<span>全选</span>
						<span>合计：<label >￥62.50</label></span>
						<span>积分：0</span>
						<span>去结算</span>
					</div>
				</div>
			</div>

			<div class="weui-tabbar">
				<a href="index.html" class="weui-tabbar__item ">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_button.png" alt="">
					</div>
					<p class="weui-tabbar__label">首页</p>
				</a>
				<a href="home2.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_msg.png" alt="">
					</div>
					<p class="weui-tabbar__label">分类</p>
				</a>
				<a href="home3.html" class="weui-tabbar__item weui-bar__item--on">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_article.png" alt="">
					</div>
					<p class="weui-tabbar__label">购物车</p>
				</a>
				<a href="home4.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_cell.png" alt="">
					</div>
					<p class="weui-tabbar__label">我的良品</p>
				</a>
			</div>
		</div>
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		</script>
	</body>

</html>